<template>
  <div>
    <el-button color="#85C1E9"
               type="danger"
               @click="showEdit()">新增标签</el-button>
    <Table :columns="columns"
           :showPagination="false"
           :dataSource="tagsData"
           :fetch="loadTagsList"
           :options="tagsOptions">
      <template #opration="{row}">
        <div class="opration">
          <a href="javascript:void(0)"
             class="a-link"
             @click="del(row)">删除</a>
        </div>
      </template>
    </Table>
    <AdminDialog :show="dialogConfig.show"
            :title="dialogConfig.title"
            :buttons="dialogConfig.buttons"
            width="500px"
            @close="dialogConfig.show=false">
      <el-form :model="formData"
               :rules="rules"
               ref="formDataRef"
               label-width="80px">
        <el-form-item label="名称"
                      prop="tagName">
          <el-input placeholder="请输入标签名称"
                    v-model="formData.tagName">
          </el-input>
        </el-form-item>
      </el-form>
    </AdminDialog>
  </div>
</template>

<script>
import { columns } from 'element-plus/es/components/table-v2/src/common.mjs';
import { getCurrentInstance, nextTick } from 'vue';


export default {
  data(){
    return{
      proxy: getCurrentInstance().proxy,
      columns:[{
        label: "标签名称",
        prop: "tagName",
      },
      {
        label: "操作",
        prop: "opration",
        width:200,
        scopedSlots: "opration",
      }],
      tagsData:{
        list:[]
      },
      tagsOptions: {
        border:true,
        extHeight:10
      },
      dialogConfig: {
        show:false,
        title:"新增标签",
        buttons:[
          {
            type:"danger",
            text:"确定",
            click: (e) => {
              this.submitForm();
            },
          },
        ],
      },
      rules:{
        tagName:[{ required:true, message:"请输入标签名称"}]
      },
      formData:{},
      formDataRef:null,
    };
  },
  methods: {
    //加载表单数据
    async loadTagsList(){
      try {
        let result = await this.proxy.Request({
          url: "/tags",
          method: "get",
        });
        if (!result.data){
          return;
        }
        this.tagsData.list = result.data;
      } catch(error){
        console.error("获取标签数据时出错：",error)
      }
    },

    //含发送请求
    submitForm(){
      console.log(this.formData)
      this.$refs.formDataRef.validate(async (valid) => {
        if (!valid) {
          return;
        }
        // let params = {};
        // Object.assign(params, this.formData);
        try{
          let result = await this.proxy.Request({
            url: "/tags/create",
            method: "POST",
            data:{
              tagName:this.formData.tagName
            },
            headers:{
              'Content-Type':'application/json'
            }
          });
          if (!result) {
            return;
          }
          this.dialogConfig.show = false;
          this.proxy.Message.success("保存成功");
          this.loadTagsList();
        }catch(error){
          console.error(error)
        }
      });
    },

    //新增标签
    showEdit() {
      this.dialogConfig.show = true;
      nextTick(() => {
        this.$refs.formDataRef.resetFields();
        this.formData.value = {};
      })
    },

    //删除标签
    // del(data) {
    //   this.proxy.Confirm('你确定要删除该标签吗?')
    //   console.log(data.tagName)
    //   console.log(data.id)
    // }
    del(data) {
      this.proxy.Confirm('你确定要删除该标签吗?', async() => {
        let result = await this.proxy.Request({
          url: '/tags/delete/'+data.id,
          method: "DELETE",
          params: {
            id: data.id,
          }
        })
        if (!result) {
          return;
        }
        this.loadTagsList();
      })
    }
  },
  mounted(){
    this.loadTagsList();
  },
};
</script>

<style scoped>

</style>